<template>
	<div>
		<div class="handle-box">
                <el-input v-model="shearchMsg" placeholder="搜索" class="handle-input mr10"></el-input>
		</div>
	
        <el-table 
				:header-cell-style="{color:'#2A62BC'}"
				:data="tableData"   
				style="width: 100%;" 
				size="small"
				border>
					<el-table-column  prop="courseNumber" label="课程编号"  ></el-table-column>
					<el-table-column prop="courseName" label="课程名称"></el-table-column>
					<el-table-column label="操作"  align="center" >
							<template #default="scope">							
								<el-row class="right-btn">			
									<el-tooltip content="阶段选择" placement="bottom-start" effect="light">  
										<el-button color="#1ab394"   @click="choose(scope.$index,scope.row)" >
											<i class="iconfont icon-jiahao1 white"></i>
										</el-button>
									</el-tooltip>
								</el-row>
							
						</template>
				</el-table-column>
			</el-table>
            <div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
    <!-- 修改阶段弹出框 -->
		<el-dialog title="阶段选择" v-model="chooseVisible" width="30%" >
			<el-form label-width="75px">
				<el-form-item label="阶段选择" >
					<el-select 
					v-model="stage" 
					filterable
					default-first-option
				>
					<el-option
						v-for="item in options.stages"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						/>
						</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button  @click="chooseVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveChoose">确 定</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus} from '@element-plus/icons-vue';
import {getChooseData} from '../../api/training' ;
//分页字体
const small = ref(true)
//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getChooseData({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};

//阶段选择
const chooseVisible = ref(false)
const form  = reactive({
	courseStage:''
	
})
const choose=(index,row)=>{
	console.log(row,'newCourse')
	chooseVisible.value =  true;
}
//阶段数据
const stage = ref('')
const options = reactive({
    stages:[
        {
            value: '第一阶段',
            label: '第一阶段',
 	     },
        {
            value: '第二阶段',
            label: '第二阶段',
 	     },
        {
            value: '第三阶段',
            label: '第三阶段',
 	     },
        {
            value: '第四阶段',
            label: '第四阶段',
 	     },
        {
            value: '第五阶段',
            label: '第五阶段',
 	     },
        {
            value: '第六阶段',
            label: '第六阶段',
 	     },
        {
            value: '第七阶段',
            label: '第七阶段',
 	     },
        {
            value: '第八阶段',
            label: '第八阶段',
 	     },
        {
            value: '第九阶段',
            label: '第九阶段',
 	     },
      
    ],
   

})
//保存选择阶段
const saveChoose=()=>{
	ElMessageBox.alert('添加成功', '127.0.0.1:5173 显示', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    // callback: (action) => {
    //   ElMessage({
    //     type: 'info',
    //     message: `action: ${action}`,
    //   })
    // },
  })
}


</script >
<style lang="less" scoped>
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		width: 20px;
		margin-left: 15px;
		padding: 1px 5px;
	}
}
.white{
	color:#fff;
}
.handle-box{
	width: 200px;
	float: right;
	margin-bottom: 10px;
}
</style>